<template>
  <div class="useradd">
    <el-card>
      <template #header>
        <div class="cardheader">
          <el-page-header @back="goBack">
            <template #content>新增用户</template>
          </el-page-header>
        </div>
      </template>
      <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
      class="userform">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input 
          v-model="form.password"
          type="password"
          placeholder="请输入密码"
          show-password
         />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input 
          v-model="form.confirmPassword"
          type="password"
          placeholder="请再次输入密码"
          show-password
         />
      </el-form-item>
      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="form.nickname" placeholder="请输入昵称" />
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="角色" prop="role">
        <el-select v-model="form.role" placeholder="请选择角色">
          <el-option label="管理员" value="admin" />
          <el-option label="普通用户" value="user" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          提交
        </el-button>
        <el-button @click="goBack">
          取消
        </el-button>
      </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import request from '@/utils/request';

const router = useRouter()
const formRef = ref(null)
const loading = ref(false)

const form = reactive({
  username:'',
  password:'',
  confirmPassword:'',
  nickname:'',
  phone:'',
  email:'',
  role:'',
  status:1
})
const validatePass = (rule,value,callback) =>{
  if(value === ''){
    callback(new Error('请输入密码'))
  }else{
    if(form.confirmPassword !== ''){
      formRef.value.validateField('confirmPassword')
    }
    callback()
  }
}

const validatePass2 = (rule,value,callback)=>{
  if(value === ''){
    callback(new Error('请再次输入密码'))
  }else if(value !== form.password){
    callback(new Error('两次输入密码不一致!'))
  }else{
    callback()
  }
}

const rules = {
  username:[
    {required:true,message:'请输入用户名',trigger:'blur'},
    {min:3,max:20,message:'长度在3到20个字符',trigger:'blur'}
  ],
  password:[
    {validator:validatePass,trigger:'blur'},
    {min:6,max:20,message:'长度在6到20个字符',trigger:'blur'}
  ],
  confirmPassword:[
    {validator:validatePass2,trigger:'blur'}
  ],
  nickname:[
    {required:true,message:'请输入昵称',trigger:'blur'}
  ],
  phone:[
    {required:true,message:'请输入手机号',trigger:'blur'},
    {pattern:/^1[3-9]\d{9}$/,message:'请输入正确的手机号',trigger:'blur'}
  ],
  email:[
    {required:true,message:'请输入邮箱',trigger:'blur'},
    {type:'email',message:'请输入正确的邮箱地址',trigger:'blur'}
  ],
  role:[
    {required:true,message:'请选择角色',trigger:'change'}
  ]
}
const handleSubmit =()=>{
  formRef.value.validate(async (valid) =>{
    if(valid){
      loading.value=true
      try{
        const { confirmPassword, ...submitForm }=form
        await request({
          url:'/user',
          method:'post',
          data:submitForm,
          confirmPassword:confirmPassword
        })
        ElMessage.success('添加成功')
        goBack()
      }catch(error){
        console.error('添加用户失败：',error)
      }finally{
        loading.value=false
      }
    }
  })
}
const goBack =()=>{
  router.back()
}
</script>

<style scoped>
.useradd{
  width: 100%;
  height: 99vh;
  overflow: hidden;
}
.cardheader{
  padding:10px 0;
}
.userform{
  max-width: 600px;
  margin: 0 auto;
  padding-top: 20px;
}
</style>